import React, { Component } from 'react';
import { Card } from 'antd';
import {Link} from 'react-router-dom';
import Pagination from '../../../util/pagination';
import TableList from '../../../util/table-list';

import Mutil from '../../../util/mm.js';
import Product from '../../../server/product-server.js';
import ListSearch from './listSearch';
import './style.less';

const _mm = new Mutil();
const _product = new Product();

class ProductList extends Component{
	constructor(props){
		super(props);
		this.state = {
			list     : [],
			pageNum  : 1,
			listType : 'list'
		}
	}
	componentDidMount(){
		this.loadProductList();
	}
	loadProductList(){	
		let listParam ={};
		listParam.listType = this.state.listType;
		listParam.pageNum  = this.state.pageNum;

		if(this.state.listType === 'search'){
			listParam.searchType = this.state.searchType;
			listParam.keyword = this.state.searchKeyword;
		}
		_product.getProductList(listParam).then((res)=>{
			this.setState(res)
		},errMag =>{
			this.setState({
				list: []
			})
			_mm.errorTips(errMag)
		});
	}
	//搜索
	onSearch(searchType, searchKeyword){
		let listType = searchKeyword === '' ? 'list' : 'search';
		this.setState({
			listType : listType,
			pageNum : 1,
			searchType : searchType,
			searchKeyword : searchKeyword
		}, ()=>{
			this.loadProductList();
		})
	}
	//当页数发生变化的时候
	onPageNumChange(pageNum){
		this.setState({
			pageNum: pageNum
		}, ()=>{
			this.loadProductList()
		})
	}
	//改变商品状态，上架或者下架
	onSetProductStatus(e,productId, currentStatus){
		let newStatus = currentStatus == 1 ? 2 : 1,
 			configTips = currentStatus === 1 ? '确定要下架该商品？' : '确定要上架该商品？';
		if(window.confirm(configTips)){
			_product.setProductStatus({
				productId : productId,
				status : newStatus
			}).then(res => {
				_mm.successTips(res);
				this.loadProductList();
			}, errMag => {
				_mm.errorTips(errMag);
			})
		}
	}
	render() {
		let tableHeads = [
			{name: '商品ID', width: '10%'},
			{name: '商品信息', width: '50%'},
			{name: '价格', width: '10%'},
			{name: '状态', width: '15%'},
			{name: '操作', width: '15%'}
		];
		return (
			<Card title="商品列表">
				<div className="page-header-right">
					<Link to="/product/save" className="btn btn-primary">
						<i className="fa fa-plus"></i>
						<span>添加商品</span>
					</Link>
				</div>
				<ListSearch onSearch={(searchType, searchKeyword) => {this.onSearch(searchType, searchKeyword)} } />
				<TableList tableHeads = {tableHeads}>
					{this.state.list.map((product, index)=>{
						return(
							<tr key={index}>
								<td>{product.id}</td>
								<td>
									<p>{product.name}</p>
									<p>{product.subtitle}</p>
								</td>
								<td>￥{product.price}</td>
								<td>
									<p>{product.status === 1 ? '在售' : '已下架'}</p>
									<button className="btn btn-xs btn-warning" onClick={(e)=>{this.onSetProductStatus(e,product.id, product.status)}}>{product.status === 1 ? '下架' : '上架'}</button>
								</td>
								<td>
									<Link className="opear" to={`/product/detail/${product.id}`}>详情</Link>
									<Link className="opear" to={`/product/save/${product.id}`}>编辑</Link>
								</td>
							</tr>
						);
					})}
				</TableList>
				<Pagination
					current={this.state.pageNum}
					total={this.state.total}
					onChange={(pageNum)=>this.onPageNumChange(pageNum)}
				 />
			</Card>
		);
	}
}

export default ProductList;